<template>
  <layout>
    <div id="profile">
      <div>
        <el-card shadow="hover" class="card">
          <h4>余额：{{ balance }} &nbsp;&nbsp;&nbsp; 信用：{{ credit }}</h4>

          <el-row :gutter="20">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <h4>个人上传的图片</h4>
                <el-container
                  style="height: 75vh; border: 1px solid black; overflow:auto"
                >
                  <div class="demo-image__lazy">
                    <el-image
                      style="width: 100%;"
                      v-for="url in personalImg.uploadUrl"
                      :key="url"
                      :src="url"
                      lazy
                    ></el-image>
                  </div>
                </el-container>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <h4>个人可以转载的图片</h4>
                <el-container
                  style="height: 75vh; border: 1px solid black; overflow:auto"
                >
                  <div class="demo-image__lazy">
                    <el-image
                      style="width: 100%;"
                      v-for="url in personalImg.reprintUrl"
                      :key="url"
                      :src="url"
                      lazy
                    ></el-image>
                  </div>
                </el-container>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="personalImg.illegalUrl.length != 0">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <h4>个人侵权的图片</h4>
                <el-container
                  style="height: 75vh; border: 1px solid black; overflow:auto"
                >
                  <div class="demo-image__lazy">
                    <el-image
                      style="width: 100%;"
                      v-for="url in personalImg.illegalUrl"
                      :key="url"
                      :src="url"
                      lazy
                    ></el-image>
                  </div>
                </el-container>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </div>
  </layout>
</template>

<script>
import Layout from "../../components/layout/Layout";
export default {
  name: "Profile",
  data() {
    return {
      balance: 0,
      credit: 0,
      personalImg: {
        uploadUrl: [],
        reprintUrl: [],
        illegalUrl: [],
      },
    };
  },
  methods: {
    open(msg, type) {
      this.$message({
        message: msg,
        type: type,
      });
    },
  },
  components: {
    Layout,
  },
  created: function() {
    //1、获取个人信用
    {
      this.$http
        .get("/api/getPersonalCredit", {
          params: { uuid: this.$store.state.sender },
        })
        .then((res) => {
          if (res.data.status == 200) {
            this.credit = res.data.data;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          this.open(err, "warning");
        });
    }

    //2、获取个人上传图片和可以转载图片
    {
      this.$http
        .get("/api/getPersonalAllImg", {
          params: { uuid: this.$store.state.sender },
        })
        .then((res) => {
          if (res.data.status == 200) {
            let resData = JSON.parse(JSON.stringify(res.data.data));
            let upload = resData.filter((data) => data.isOwner);
            let reprint = resData.filter((data) => data.reprint);
            let illegal = resData.filter((data) => data.illegal);
            upload.forEach((element) => {
              this.personalImg.uploadUrl.push(element.imgurl);
            });
            reprint.forEach((element) => {
              this.personalImg.reprintUrl.push(element.imgurl);
            });
            if (illegal.length != 0) {
              this.open('您有侵权图片','warning');
              illegal.forEach((element) => {
                this.personalImg.illegalUrl.push(element.imgurl);
              });
            }
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          // this.open(err, "warning");
        });
    }

    //3、获取个人余额
    {
      this.$http
        .get("/api/balance", {
          params: { uuid: this.$store.state.sender },
        })
        .then((res) => {
          if (res.data.status == 200) {
            this.balance = res.data.data;
          } else throw new Error(res.data.msg);
        })
        .catch((err) => {
          this.open(err, "warning");
        });
    }
  },
};
</script>

<style scoped>
.card {
  height: 95vh;
  overflow: auto;
}
</style>
